<template>
	<view class="uploadVideoPage">
		<view ew class="uploadFlex">
			<view class="uploadImg-warp" v-for="(item, index) in imageList" :key="index">
				<!-- 视频 -->

				<block v-if="isVideo(item)">
					<image
						class="image-box"
						:src="item + '?x-oss-process=video/snapshot,t_3000,f_jpg,m_fast,ar_auto'"
						mode="aspectFill"
						@tap="handleWatchVideo"
						:data-item="item"
					/>
					<image class="video-bf" src="/static/image/order/play.png" mode="aspectFit" @tap="handleWatchVideo" :data-item="item" />
				</block>

				<!-- 图片 -->

				<image class="image-box" v-else :src="item" mode="aspectFill" @tap="handlerWatchImage" :data-item="item" />

				<!-- 删除图标 -->

				<image
					v-if="uploadShow"
					class="image-del"
					src="/static/image/order/del-ico.png"
					mode="aspectFill"
					@tap="handleRemove"
					:data-index="index"
					:data-item="item"
				></image>
			</view>
			<view class="uploadImg-warp u-flex-center" @tap="handlerUpload" v-if="uploadShow && imageList.length < length">
				<image class="icon-xiaji" src="/static/image/order/camera.png" mode="aspectFill"></image>
				<text class="imageText" v-if="imageText">{{ imageText }}</text>
			</view>
			<view class="uploadImg-warp" v-if="uploadShow && imageList.length < 5" style="background: none"></view>
			<view class="uploadImg-warp" v-if="uploadShow && imageList.length < 4" style="background: none"></view>
			<view class="uploadImg-warp" v-if="uploadShow && imageList.length < 3" style="background: none"></view>
			<view class="uploadImg-warp" v-if="uploadShow && imageList.length < 2" style="background: none"></view>
		</view>
	</view>
</template>
<script>
import { uploadImage, uploadVideo } from '../../request/api/v1/utils';
export default {
	data() {
		return {
			imageList: []
		};
	},
	props: {
		imageText: {
			type: String,
			default: ''
		},
		value: {
			type: Array
		},
		uploadShow: {
			type: Boolean,
			default: true
		},
		length: {
			type: Number,
			default: 5
		}
	},
	watch: {
		value: {
			handler: function(value) {
				this.imageList = value;
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		isVideo(item) {
			return false;
			// return getRegExp('(.*)\.(mp4|rmvb|avi|ts)$', 'g').test(item);
		},
		handleWatchVideo(e) {
			const { item } = e.currentTarget.dataset;
			console.log('item', item);
			uni.navigateTo({
				url: `/pages/orderVideo/orderVideo?videosrc=${item}`
			});
		},

		handlerWatchImage(e) {
			const { item } = e.currentTarget.dataset; // let newImageList = this.data.imageList.map((v) => {
			let newImageList = this.imageList.filter(v => {
				return !/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(v); //!/(.*)\.(mp4|rmvb|avi|ts)$/.test(v)
			});
			console.log('newImageList', newImageList);
			uni.previewImage({
				current: item,
				urls: newImageList,
				success: function(data) {
					console.log(data);
					console.log('成功');
				},
				fail: function(err) {
					console.log(err);
				}
			});
		},

		handleRemove(e) {
			const { index, item } = e.currentTarget.dataset;
			let type = 'img';

			if (/(.*)\.(mp4|rmvb|avi|ts)$/.test(item)) {
				type = 'video';
			} else {
				type = 'img';
			}

			const that = this;
			uni.showModal({
				//使用模态框提示用户进行操作
				title: '确认',
				content: type == 'img' ? '是否确定删除此图片？' : '是否确定删除此视频？',
				success: function(res) {
					if (res.confirm) {
						//判断用户是否点击了确定
						that.imageList.splice(index, 1);
						that.imageList = that.imageList;
						that.handleSuccess();
					} else if (res.cancel) {
						return false;
					}
				}
			});
		},

		handlerUpload() {
			uni.showActionSheet({
				itemList: ['图片'],
				success: res => {
					// if (res.tapIndex == 1) {
					this.handlerChooseImage(); // } else {
					//     this.handleChooseVideo()
					// }
				},
				fail: err => {
					console.log('err', err);
				}
			});
		},

		handlerChooseImage() {
			const { imageList, length } = this;
			uni.chooseImage({
				count: length - imageList.length,
				sizeType: ['original', 'compressed'],
				sourceType: ['camera', 'album'],
				//从相册选择,还是拍照
				success: res => {
					console.log(res);
					let tempFiles = res.tempFiles;

					for (let i in tempFiles) {
						if (res.tempFiles[i].size > 2 * 1024 * 1024) {
							uni.showToast({
								title: '请上传小于2M的图片',
								icon: 'none'
							});
							return false;
						}
					}

					this.handleRequestImage(res.tempFilePaths);
				},
				fail(err) {
					console.log(err);
				}
			});
		},

		handleChooseVideo() {
			const { imageList, length } = this;
			uni.chooseVideo({
				count: length - imageList.length,
				//默认9
				sourceType: ['camera', 'album'],
				//从相册选择
				maxDuration: 60,
				success: res => {
					let { duration, tempFilePath } = res;

					if (duration > 60 || duration < 3) {
						uni.showToast({
							title: '视频时间必须在3s-60s之间',
							icon: 'none'
						});
						return false;
					}

					this.handleRequestVideo(tempFilePath);
				},

				fail(err) {
					console.log(err);
				}
			});
		},

		handleRequestImage(data) {
			data.forEach(async file => {
				uni.showLoading({
					title: '正在上传...'
				});
				let res = await uploadImage({
					file
				});

				if (res.img_url) {
					uni.hideLoading();
				}

				this.imageList.push(res.img_url);
				this.imageList = this.imageList;
				this.handleSuccess();
			});
		},

		async handleRequestVideo(file) {
			uni.showLoading({
				title: '正在上传...'
			});
			let res = {};

			try {
				res = await uploadVideo({
					file
				});
				uni.hideLoading();
				this.imageList.push(res.url);
				this.imageList = this.imageList;
				this.handleSuccess();
			} catch (error) {
				uni.hideLoading();
			}
		},

		handleSuccess() {
			this.$emit('onValue', {
				detail: this.imageList
			});
		}
	}
};
</script>
<style>
@import './uploadVideo.css';
</style>
